<template>
    <div id="app" class="page-comment" :class="{'page-loading':pageLoading}">
        <scroll-fixed>
            <page-bar @right="moreConfig.status = true">
                <div slot="middle" class="header-middle">{{pageName}}</div>
                <div slot='right'></div>
            </page-bar>
        </scroll-fixed>
        <ui-loading v-if="pageLoading">
            <div slot="content"></div>
        </ui-loading>
        <page-error v-else-if="pageError" @refresh="pageRefresh"></page-error>
        <scroll-list ref="scroll" v-else class="ui-list" :disabled="true" :config="scroll" @bottom="loadmore"> 
            <div class="page-info">
                <div class="news" v-if="type=='news'">
                    <div class="header wrap">
                        <p class="tit" id="title">{{info.title}}</p>
                        <div class="info">
                            <div class="slogo">
                                <img :src="info.logo_url" />
                            </div>
                            <span class="source">{{info.source}}</span>
                            <span>{{info.format_time}}</span>
                        </div>
                    </div>
                </div><!-- end news -->
                <div class="com" v-else>
                    <ui-comment-item :item="info" :admireList="admire_list" :type='2' @report="report_status = true"/>
                </div><!-- end com -->
            </div><!-- end page-info -->
            <div v-if="list.length" class="comment-list">
                <div class="list">
                    <p class="tit">全部评论<template v-if="type == 'news'">({{info.comment_count}})</template></p>
                    <ui-comment-item :item="item" v-for="item in list" :type="5" :key="item.id" @reply="reply" @del="delItem"/>
                </div>
            </div><!-- comment-list -->
            <div v-else class="no-comment">
                抢先评论
            </div>
        </scroll-list> 
        <offline />
    
        <transition name="page-slide-left">
            <ui-report v-if="report_status" :id="id" :from="'comment'" @cancel="report_status = false" @done="report_status = false,$toast('举报成功')"/>
        </transition>

        <ui-preview :config="preview" v-if="preview.status" @close="preview.status = false"/>
        <ui-comment ref="comment" @done="commentDone"/>
    </div><!-- end comment-page -->
</template>
<script>
import pageBar from '../components/pagebar.vue'
import scrollFixed from '../components/scrollFixed.vue'
import UILoading from '../components/loading.vue'
import pageError from '../components/pageError.vue'
import offline from '../components/offline.vue'
import UIComment from '../components/comment.vue'
import ComItem from '../components/commentItem.vue'

import uiPreview from '../components/preview.vue'

import mxReport from '../mixins/report.js'
import reportVue from '../components/report.vue';
import ScrollList from "../components/scrollList.vue";
export default {
    data(){
        return {
            id:'',
            type:'news',// news ,comment,
            pageName: '', 
            info:{},
            page_no:1,
            is_end:false,
            list:[],
            admire_list:[],//点赞列表，评论详情才有
            preview:{
                status:false,
                delete:false,
                active:0,
                list:[]
            },
            pageLoading:true,
            pageError:false,
            report_status:false,
            scroll:{
                bottom:false,
            },
          
        }
    },
    mixins:[mxReport],
    components:{
        [pageBar.name]:pageBar,
        [scrollFixed.name]:scrollFixed,
        [pageError.name]:pageError,
        [offline.name]:offline,
        [UILoading.name]:UILoading,
        [UIComment.name]:UIComment,
        [uiPreview.name]:uiPreview,
        [ScrollList.name]:ScrollList,
        [ComItem.name]:ComItem,
    },
    mounted(){
        this.$on('pageRefresh',()=>{
            this.pageLoading = true;
            this.page_no = 1;
            this.is_end = false;
            this.loadPage().then(rs=>{
                this.pageLoading = false;
                this.$nextTick().then(()=>{
                    this.scroll.bottom = this.list.length == 0 ? 'hidden' :(this.is_end ? 'done' : false);
                    this.$refs.comment.$emit('init',{
                        type: this.type == 'news' ? 'add' : 'reply',
                        from:this.type =='news' ? 'news':'comment' ,
                        count:this.type == 'news' ? this.info.comment_count : this.info.reply_total,
                        info:this.info
                    });
                });
            }).catch(e=>{
                this.pageError = true;
            }).finally(()=>{
                this.pageLoading = false;
            });

        })

        let parse = this.$utils.urlFactory.parse(location.search);
        if(parse && parse.id && parse.type){
            this.id = parse.id;
            this.type = parse.type;
            this.$emit('pageRefresh');
        }else{
            this.$toast('参数有误').then(()=>{
                history.back();
            })
        }
    },
    methods:{
        loadPage(){
            let url,params = {
                page_no:this.page_no
            }

            if(this.type == 'news'){
                url = '?ct=comment&ac=get_list';
                params.foreign_id = this.id;
            }else{
                url = '?ct=comment&ac=detail';
                params.comment_id = this.id;
            }

            return this.$http.get(url,{params}).then(response =>{
                let {data} = response;
                if(data.code == 0){
                    if(this.type == 'news'){
                        this.info = data.data.news_info;
                        this.info.id = this.id;
                        this.info.format_time = this.$moment(this.info.issue_time * 1000).format("MM/DD hh:mm");
                        // data.data.list.forEach(item=>{
                        //     item.create_time = this.$moment(item.create_time * 1000).fromNow().replace(" ", "");
                        // })
                        this.list = this.list.concat(data.data.list);
                    }else{
                        if(this.page_no == 1) {
                            this.info = data.data.comment_info;
                        }
                        this.info.comment_type = 5;
                        // this.info.create_time = this.$moment(this.info.create_time * 1000).fromNow().replace(" ", "");
                        this.admire_list = data.data.admire_list;
                        // data.data.reply_list.forEach(item=>{
                        //     item.create_time = this.$moment(item.create_time * 1000).fromNow().replace(" ", "");
                        // })
                        this.list = this.list.concat(data.data.reply_list);
                    }

                    this.pageName = this.type == 'news' 
                            ? (this.list && this.list.length>0 ? '' : '暂无') + '评论' 
                            : (this.list && this.list.length>0 ? (this.list.length + '条回复') : '暂无回复')
                   
                    this.is_end = !data.data.is_have_data;
                    this.page_no++;
                }else{
                    this.$toast(data.msg);
                }
            }).catch(e=>{
                this.$toast('获取评论数据失败');
            })
        },
        pageRefresh(){
            this.pageError = false;
            this.$emit('pageRefresh');
        },
        loadmore(){
            if (this.scroll.bottom || this.is_end) return false;
            this.scroll.bottom = true;
            this.loadPage().finally(() => {
                this.$nextTick(() => {
                    this.scroll.bottom = this.is_end ? 'done' : false;
                });
            });
        },
        reply(item){
            this.$refs.comment.$emit('edit',{
                type:'reply',
                info:item
            })
        },
        commentDone(rs){
            this.list.unshift(rs)
            this.pageName = this.type == 'news' 
                ? '评论' 
                : (this.list ? (this.list.length + '条回复') : '暂无回复')
        },
        delItem(id) {
            let item = this.list.filter((res)=> {
                return res.id == id
            })
            let index = this.list.indexOf(item[0]);
            if(index != -1) {
                this.list.splice(index, 1);

                this.pageName = this.type == 'news' 
                    ? '评论' 
                    : (this.list.length ? (this.list.length + '条回复') : '暂无回复')
            }
        }
    }
}
</script>
<style lang="less">
.page-comment {
    background-color:#fff;

    .header-middle {
        transition: opacity .2s;
        font-size:34px;
        color:#141414;
    }
    .page-info {
        .header.wrap {
            padding:0 30px 40px;
        }
        .tit {
            font-size:44px;
            line-height: 64px;
            font-weight: bold;
        }
    
        .slogo {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right:12px;
            width:58px;
            height:58px;
            padding:10px;
            border-radius: 50%;
            overflow: hidden;
            border:2px solid #efefef;

             img {
                display: block;
                width:40px;
                height:auto;
            }
        }
       
        .source {
            color:#a98273;
        }
        .info {
            display: flex;
            align-items: center;
            margin-top:20px;
            font-size:24px;
            color:#919191;
            span + span {
                margin-left:12px;
            }
        }
    }

    .ui-list {
        //底部栏的高度
        padding-bottom:104px;
    }

    .comment-list {
        border-top: 1px solid #e3e3e3;
        background-color:#fff;
        .list {
            &>.tit {
                padding: 36px;
                font-size:28px;
                color:#282828;
                font-weight: bold;
            }
        }
    }

    .no-comment {
        padding: 36px;
        font-size: 28px;
        color: #919191;
        border-top: 1px solid #e3e3e3;
    }
}
</style>


